import { DirectiveBinding } from 'vue';
import { debounce } from "lodash-es";
 
interface HTMLElementCustom extends HTMLElement {
  resizeListener?:  () => void;
}
 
 
const doResize = debounce(async (el: HTMLElement, binding: DirectiveBinding) => {
  // 获取调用传递过来的数据
  const { value: { bottomOffset = 0 } = {} } = binding;
  const height = window.innerHeight - el.getBoundingClientRect().top - bottomOffset;
  el.style.transition = 'height 0.5s';
  el.style.height = `${height}px`;
}, 500)
 
export default {
  // 初始化设置
  beforeMount(el: HTMLElementCustom, binding: DirectiveBinding) {
    el.resizeListener = async () => {
      await doResize(el, binding);
    }
    el.resizeListener();
    window.addEventListener('resize', el.resizeListener);
  },
  // 销毁时设置
  beforeUnmount(el: HTMLElementCustom) {
    // 移除resize监听
    window.removeEventListener('resize', el.resizeListener as (this: Window, ev: UIEvent) => any);
  }
};